<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>攻击事件</title>
		<link href="../component/pear/css/pear.css" rel="stylesheet">
		<style>
			.pre-text {
				white-space: pre-wrap; /* CSS3, 现代浏览器 */
				white-space: -moz-pre-wrap; /* Mozilla, Firefox 2 and earlier */
				white-space: -o-pre-wrap; /* Opera 7 */
				word-wrap: break-word; /* Internet Explorer 5.5+, Safari, Chrome, Firefox, Opera 15+ */
				overflow-y: auto;
			}
		</style>
	</head>
	<body class="pear-container">
		<div class="layui-row">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header">攻击事件</div>
					<div class="layui-card-body">
						<div class="layui-row">
							<div class="layui-col-md12">
								<table id="id-table-events" lay-filter="filter-table-events"></table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<form class="layui-form layui-bg-gray" style="padding: 10px 15px;display: none;" lay-filter="filter-form-detail" id="id-form-detail">
			<input type="hidden" name="id" />
			<div class="layui-row layui-col-space10">
				<div class="layui-col-md12">
					<div class="layui-card">
						<div class="layui-card-body">
							<div class="layui-row layui-col-space10">
								<div class="layui-col-md2">攻击类型</div>
								<div class="layui-col-md5"><span id="data_attack_type" class="layui-badge"></span></div>
								<div class="layui-col-md5" style="text-align: right;"><span class="layui-badge layui-font-16 layui-padding-1" id="data_action"></span></div>
							</div>
							<div class="layui-row layui-col-space10">
								<div class="layui-col-md2">URL</div>
								<div class="layui-col-md10 data" id="data_request_uri"></div>
							</div>
							<div class="layui-row layui-col-space10">
								<div class="layui-col-md2">攻击者IP</div>
								<div class="layui-col-md10 data" id="data_ip"></div>
							</div>
							<div class="layui-row layui-col-space10">
								<div class="layui-col-md2">攻击时间</div>
								<div class="layui-col-md10 data" id="data_request_time"></div>
							</div>
							<div class="layui-row layui-col-space10">
								<div class="layui-col-md2">防护模块</div>
								<div class="layui-col-md10 pre-text data" id="data_security_module"></div>
							</div>
							<div class="layui-row layui-col-space10">
								<div class="layui-col-md2">命中规则</div>
								<div class="layui-col-md10 pre-text data" id="data_hit_rule"></div>
							</div>
							<div class="layui-row layui-col-space10">
								<div class="layui-col-md2">请求ID</div>
								<div class="layui-col-md10 data" id="data_request_id"></div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="layui-row layui-col-space10" style="margin-top: 10px;">
				<div class="layui-col-md12">
					<div class="layui-card">
						<div class="layui-card-body">
							<div class="layui-row layui-col-space10">
								<div class="layui-col-md12">
									<div class="layui-tab layui-tab-brief" lay-filter="filter-tab">
										<ul class="layui-tab-title">
											<li class="layui-this" lay-id="tab1">请求报文</li>
											<li>响应报文</li>
										</ul>
										<div class="layui-tab-content" style="height: 250px;">
											<div class="layui-tab-item layui-show pre-text data" id="data_request_body" style="height: 250px;"></div>
											<div class="layui-tab-item pre-text data" id="data_response_body" style="height: 250px;"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="layui-row layui-col-space10">
				<div class="layui-col-md12">
					<div style="float: right;">
						<button type="button" class="pear-btn" lay-on="close">关闭</button>
					</div>
				</div>
			</div>
		</form>

		<script type="text/html" id="user_toolbar">
			<form class="layui-form layui-row layui-col-space8">
				<div class="layui-col-md2">
					<input type="text" name="ip" value="" placeholder="攻击者IP地址" class="layui-input" lay-affix="clear" />
				</div>
				<div class="layui-col-md2">
					<input type="text" name="serverName" placeholder="域名" lay-affix="clear" class="layui-input" />
				</div>
				<div class="layui-col-md2">
					<select name="attackType" id="attackType">
						<option value="">攻击类型</option>
					</select>
				</div>
				<div class="layui-col-md2">
					<select name="action" id="action">
						<option value="">处置动作</option>
					</select>
				</div>
				<div class="pear-btn-container layui-col-md2">
					<button class="pear-btn pear-btn-primary pear-btn-md" lay-submit lay-filter="filter-table-search">查询</button>
					<button type="reset" class="pear-btn pear-btn-md">重置</button>
				</div>
			</form>
		</script>
		<script type="text/html" id="table_bar">
			<i class="layui-icon layui-icon-tips" style="cursor: pointer;" title="详情" lay-event="detail"></i>
		</script>

		<script src="../component/layui/layui.js"></script>
		<script src="../component/pear/pear.js"></script>
		<script src="../js/action.js"></script>
		<script src="../js/attackType.js"></script>
		<script>
			layui.use(['form','table','util','jquery','popup','tag'], function() {
				var table = layui.table;
				var form = layui.form;
				var util = layui.util;
				var popup = layui.popup;
				var element = layui.element
				var $ = layui.$;

				function getIPGeoName(data) {
					if (data.ip_country_code == 'CN') {
						if (data.ip_province_cn == data.ip_city_cn) {
							return '(' + data.ip_country_cn + '-' + data.ip_city_cn + ')';
						} else {
							return '(' + data.ip_province_cn + '-' + data.ip_city_cn + ')';
						}
					} else {
						return '(' + data.ip_country_cn + ')';
					}
				}

				table.render({
					elem: '#id-table-events',
					url: '/events/list',
					cols: [[ //标题栏
						{field: 'server_name', title: '域名'},
						{field: 'request_uri', title: '请求地址'},
						{field: 'ip', title: '攻击者IP', templet: function(d) {
							return '<div>' + d.ip + getIPGeoName(d) + '</div>';
						}},
						{field: 'attack_type', title: '攻击类型', width: 150, templet: function(d) {
							return '<div>' + getAttackTypeText(d.attack_type) + '</div>';
						}},
						{field: 'severity_level', title: '危险级别', width: 120, templet: function(d) {
							let levelStr = '';
							switch (d.severity_level) {
								case 'low':
									levelStr = '<span class="layui-badge layui-bg-blue">低危</span>';
									break;
								case 'medium':
									levelStr = '<span class="layui-badge" style="background-color:#ffcc00;">中危</span>';
									break;
								case 'high':
									levelStr = '<span class="layui-badge layui-bg-orange">高危</span>';
									break;
								case 'critical':
									levelStr = '<span class="layui-badge layui-bg-red">严重</span>';
									break;
								default:
									levelStr = '<span class="layui-badge layui-bg-blue">低危</span>';
							}

							return '<div>' + levelStr + '</div>';
						}},
						{field: 'action', title: '处置动作', width: 100, templet: function(d) {
							return '<div>' + getActionText(d.action) + '</div>';
						}},
						{field: 'request_time', title: '攻击时间', width: 160, minWidth: 150},
						{fixed: 'right', title:'操作', width: 60, minWidth: 60, toolbar: '#table_bar'}
					]],
					toolbar: '#user_toolbar',
					css:'.layui-form{margin-top:0px;}',
					//skin: 'line', // 表格风格
					//even: true,
					page: true, // 是否显示分页
					limits: [10, 15, 20, 25, 30, 50, 100],
					limit: 10, // 每页默认显示的数量
				});

				// 触发单元格工具事件
				table.on('tool(filter-table-events)', function(obj) {
					var rowData = obj.data; // 获得当前行数据

					if(obj.event === 'detail') {
						$.get('/events/get', {id: rowData.id}, function(res) {
							if (res && res.code == 200) {
								var data = res.data;
								var html = '';
								if (data) {
									$.each(data, function(key, val) {
										if (key == 'request_body' && val == null) {
											val = '无请求报文';
										} else if (key == 'response_body' && val == null) {
											val = '无响应报文';
										}
										$('#data_' + key).text(val);
									});

									var ip = data.ip + getIPGeoName(data);

									var ac = data.action.toLowerCase();
									if (ac == 'deny') {
										$('#data_action').addClass('layui-badge');
									} else if (ac == 'allow') {
										$('#data_action').addClass('layui-badge layui-bg-green');
									} else {
										$('#data_action').addClass('layui-badge layui-bg-orange');
									}
									$('#data_action').text(getActionText(ac));

									$('#data_attack_type').text(getAttackTypeText(data.attack_type));
									switch (data.severity_level) {
										case 'low':
											$('#data_attack_type').addClass('layui-badge layui-bg-blue');
											break;
										case 'medium':
											$('#data_attack_type').addClass('layui-badge').css('background-color','#ffcc00');
											break;
										case 'high':
											$('#data_attack_type').addClass('layui-badge layui-bg-orange');
											break;
										case 'critical':
											$('#data_attack_type').addClass('layui-badge layui-bg-red');
											break;
										default:
											$('#data_attack_type').addClass('layui-badge layui-bg-blue');
									}

									if (data.security_module) {
										$('#data_security_module').text(data.security_module).parent().show();
									} else {
										$('#data_security_module').text('').parent().hide();
									}

									$('#data_ip').text(ip);
								}
							} else {
								popup.failure(res.msg);
							}
						}, "json");

						form.render(null, 'filter-form-detail');
						
						layer.open({
							type: 1,
							title: '攻击详情',
							shade: 0.6,
							shadeClose: true,
							area: ['750px', 'auto'],
							content: $('#id-form-detail'),
							end: function() {
								$("#id-form-detail").trigger("reset");
								$("#id-form-detail").find("input[type='hidden']").val("");
								$("#id-form-detail").find(".data").text("");
								element.tabChange("filter-tab", "tab1");
								$('#data_action').removeClass('layui-bg-green layui-bg-orange');
								$('#data_attack_type').removeClass();
							}
						});
					}
				});

				form.on('submit(filter-table-search)', function(data) {
					var field = data.field; // 获得表单字段
					// 执行搜索重载
					table.reloadData('id-table-events', {
						page: {
							curr: 1 // 重新从第 1 页开始
						},
						where: field // 搜索的字段
					});
					return false; // 阻止默认 form 跳转
				});

				util.on('lay-on', {
					close: function() {
						layer.closeLast('page');
					}
				});

				$(function(){
					initActionSelect('action', 'coding', function() {
						form.render($('#action'));
					});
					initAttackTypeSelect('attackType', function() {
						form.render($('#attackType'));
					});
					// 阻止回车触发表单提交
					$(document).on('keydown', function (e) {
						if (e.keyCode === 13) {
							e.preventDefault();
							return false;
						}
					});
				});
			});
		</script>
	</body>
</html>
